<style lang="less" scoped>
.logo_top{
  display: none;
}
body {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.header {
  width: 100%;
  height: 705px;
  background-size: 100% 100%; 
  background: url("../assets/image/about/about.jpg") no-repeat center center;
}
.phone_header{
  display: none;
}
.header_top {
  width: 100%;
  height: 140px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row wrap;
}
.header_top_left{
  width: 80%;
  height: 70px;
}
.header_top_left img {
  width: 100%;
}

.header_top_con {
  width: 90px;
  height: 70px;
}
.header_top_right a { 
  width: 100px;
  color: white;
  text-decoration: none;
  display: flex;
  flex-flow: row wrap;
}
.header_con {
  width: 60%;
  height: auto;
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
}
.header_con img{
  width: 100%;
  height: auto;
  margin-top: 50px;
}
.header_con p {
  width: 100%;
  color: white;
  font-size: 24px;
  height: 80px;
  line-height: 80px;
}
.abouts {
  width: 100%;
  height: auto;
  margin-top: 4%;
}
.abouts_div {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  margin-bottom: 2%;
}
.abouts_div span {
  font-size: 40px;
  color: rgb(94, 97, 96);
}
.abouts_div div {
  width: 70px;
  height: 3px;
  margin-top: 10px;
  background-color: cornflowerblue;
}
.abouts_div_text {
  line-height: 28px;
  color: rgb(103, 103, 110);
  text-align: center;
}
.about_blue {
  color: cornflowerblue;
}
.about_img {
  width: 60%;
  height: auto;
  margin: 35px auto;
  margin-bottom: 35px;
}
.about_img img {
  height: auto;
  width: 100%;
}
.about_img_lv {
  width: 70%;
  height: 10px;
  background-color: rgb(25, 143, 25);
  margin: 0 auto;
}
.abouts_top {
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}
.about_center {
  width: 100%;
  height: auto;
  color: white;
  background-color: rgb(61, 162, 209);

}
.about_center_top {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  margin-bottom: 2%;
}
.about_center_top span {
  font-size: 38px;
  margin-top: 40px;
}
.about_center_top div {
  width: 70px;
  height: 3px;
  margin-top: 10px;
  background-color: white;
}
.about_center_font {
  width: 100%;
  height: auto;
  line-height: 28px;
  text-align: center;
}
.about_center_img {
  width: 100%;
  height: auto;
  margin-top:98px ;
  display: flex;
  justify-content: center;
}
.about_down {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about_down_box {
  width: 80%;
  height: auto;
  margin: 0 auto;
  margin-bottom: 50px;
}
.about_down_top {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  margin-bottom: 2%;
}
.about_down_top span {
  font-size: 38px;
  margin-top: 40px;
}
.about_down_top div {
  width: 70px;
  height: 3px;
  margin-top: 10px;
  background-color: rgb(103, 183, 248);
}
.about_down_font {
  width: 100%;
  height: auto;
  line-height: 28px;
  margin-bottom: 40px;
}
.about_down_fonts {
  width: 100%;
  height: auto;
  line-height: 28px;
}
.about_down_a {
  width: 400px;
  height: 65px;
  display: block;
  border: 3px solid rgb(65, 151, 221);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(65, 151, 221);
  margin-top: 55px;
}
.header_top_lefts {
  display: none;
}
.computer_nav{
  width: 100%;
  height: auto;
}

@media (max-width: 1000px){
  .logo_top{
    width: 50%;
    display: block;
  }
.computer_nav{
  display: none;
}
  .header {
   display: none;
  }
  .phone_header{
  display: block;
}
  .location{
    display: none;
  }
  .header_top{
    width: 100%;
    height: auto;
    padding-top: 15px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
  }
  .header_top_left{
    width: 100%;
    display: flex;
  }
  .header_top_left img{
    object-fit: contain;
  }
  .header_top span{
    width: 50%;
    display: flex;
    justify-content: flex-end;
  }
  .header_top_lefts{
    width: 30%;
    cursor: pointer;
    height:35px;
    display: flex;
    justify-content: center;
  }
  .header_con {
    width: 100%;
    height: 200px;
    display: flex;
    flex-flow: column wrap;    
    margin-top: 50px;
  }
  .header_con img{
    width: 80%;
    margin: 0 auto;
  }
  .header_con p {
    margin: 0 auto;
    width: 85%;
    color: white;
    font-size: 15px;
    height: 80px;
    line-height: 80px;
  }
  .header_top_right{
    display: none;
  }
  .nav{
  display: flex;
  left: 0;
  width: 50%;
  height: 200px;
  position: fixed;
  top: 0;background-color:rgba(0,0,0,0.5);
  }
  .nav ul{
    margin: 0;
    width: 100%;
    height: 100%;
    flex-direction: row;
    display: flex;
    padding-left: 15px;
    align-items: flex-start;
    flex-direction: column;
  }
  .nav ul li{
    display: flex;
    // border: 1px solid red;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    list-style: none;
    color: white;
  }
  .header_top_con {
    width: 100%;
    height: 70px;
  }
  .abouts {
    width: 100%;
    height: auto;
    margin-top: 4%;
  }
  .abouts_div {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-items: center;
    margin-bottom: 2%;
  }
  .abouts_div span {
    font-size: 27px;
    color: rgb(94, 97, 96);
  }
  .abouts_div div {
    width: 70px;
    height: 3px;
    margin-top: 10px;
    background-color: cornflowerblue;
  }
  .abouts_div_text {
    width: 100%;
    height: auto;
    line-height: 20px;
    font-size: 14px;
    color: rgb(103, 103, 110);
  }
  .about_blue {
    color: cornflowerblue;
  }
  .about_img {
    width: 70%;
    height: auto;
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .about_img img {
    width: 100%;
    height: auto;
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .about_img_lv {
    width: 70%;
    height: 7px;
    background-color: rgb(25, 143, 25);
    margin: 0 auto;
  }
  .abouts_top {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
  }
  .about_center {
    width: 100%;
    height: auto;
    color: white;
    display: flex;
    flex-flow: column wrap;
    background-color: rgb(61, 162, 209);
  }
  .about_center_top {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    align-items: center;
    margin-bottom: 2%;
  }
  .about_center_top span {
    font-size: 25px;
    margin-top: 40px;
  }
  .about_center_top div {
    width: 70px;
    height: 3px;
    margin-top: 10px;
    background-color: white;
  }
  .about_center_font {
    width: 80%;
    height: auto;
    display: flex;
    margin: 0 auto;
    flex-flow: row wrap;
    line-height: 28px;
  }
  .about_center_img {
    width: 100%;
    height: auto;
    position: relative;
    top: 20px;
    margin: 0 auto;
  }
  .about_center_img img {
    width: 80%;
    height: auto;
  }
  .about_down {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
  }
  .about_down_box {
    width: 80%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 50px;
  }
  .about_down_top {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    align-items: center;
    margin-bottom: 2%;
  }
  .about_down_top span {
    font-size: 27px;
    margin-top: 35px;
  }
  .about_down_top div {
    width: 70px;
    height: 3px;
    margin-top: 10px;
    background-color: rgb(103, 183, 248);
  }
  .about_down_font {
    width: 100%;
    height: auto;
    line-height: 28px;
    margin-bottom: 40px;
    text-align: center;
    font-size: 14px;
  }
  .about_down_fonts {
    width: 100%;
    height: auto;
    text-align: center;
    line-height: 28px;
  }
  .about_down_a {
    width: 80%;
    height: 35px;
    display: block;
    border: 3px solid rgb(65, 151, 221);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(65, 151, 221);
    margin-top: 55px;
  }
}
.scroll-menu {
  display: flex;
  text-align: center;
  height: 25px;
  overflow: hidden;
}
.scroll-menu li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
}
.scroll-menu li {
  height: 20px;
  list-style: none;
}
.scroll-menu li * {
  display: inline-block;
  font-size: 18px;
  line-height: 23px;
}
.scroll-menu li a {
  margin-top: -25px;
  transition: 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);
}
.scroll-menu li a:hover {
  margin-top: 0;
}
.scroll-menu li a:before {
  content: attr(data-text);
  display: block;
  color: #f3f3f3;
  font-weight: 600;
}
</style>
<template>
  <div class="about">
    <!-- <div class="bodys">
      <img src="../assets/image/about/about.jpg" alt="">
    </div> -->
    <div class="phone_header"><phonenav :backcolor="backcolor" :type="type" /></div>
    <div class="header">
      <div class="header_top">
        <div class="computer_nav"><topnav style=""></topnav></div>
        <a href="" class="logo_top">
          <div class="header_top_left">
            <img :src="logo" alt="" />
          </div>
        </a>
        <span>
           <div class="header_top_lefts" @click="flags">
              <img src="../assets/image/about/cai.png" alt="">
            </div>
        </span>
        
        <!-- <div class="header_top_right">
          <ul class="scroll-menu">
            <li v-for="(vo, key) in nav" :key="key">
              <a :data-text="vo.title" href="">{{ vo.title }}</a>
            </li>
          </ul>
        </div> -->
        <!-- <transition name="fade"> -->
          <el-drawer
          :visible.sync="flag"
          :direction="direction"
          >
          <div>首页</div>
          <div>关于我们</div>
          <div>商城小程序</div>
          <div>生鲜小程序</div>
          <div>案例展示</div>
          <div>服务项目</div>
          <div>联系我们</div>
        </el-drawer>
        <!-- </transition> -->
      </div>
      <div class="header_con">
        <!-- <img :src="gz_07" alt="" /> -->
        <p>大智 专注 设计 技术 服务为核心 为客户持续创造价值</p>
      </div>
    </div>
    <div class="abouts">
      <!-- about上部分 -->
      <div class="abouts_top">
        <div class="abouts_div">
          <span>我们是谁</span>
          <div></div>
        </div>
        <div class="abouts_div_text">
          大智网络 是定制开发专注 小程序开发- 网站建设-APP-微信公众号开发。<br />
          我们是一群热爱技术、设计的互联网技术团队，我们在互联网行业有着多年丰富的经验，<br />
          最早是为中小企业做网站和各种门户站，以电商平台的建设，<br />
          目前到移动网页的开发，和微信网站的开发，H5页面制作到最新的<span
            class="about_blue"
            >小程序开发</span
          >。
        </div>
        <div class="about_img">
          <img src="../assets/image/about/dz_about1.png" alt="" />
        </div>
        <div class="abouts_div_text">
          从过去到现在我们在工作当中服务过太多知名企业。<br />
          例如老庙黄金、太平洋保险、松下电器、宝钢气体、正泰电气、温碧泉、自然堂等大小品牌案例数于百个。<br />
          不管我们对项目的质量还是技术难度，都已是一支成熟的技术团队。 <br />
        </div>
        <div class="about_img">
          <img src="../assets/image/about/dz_about2.jpg" alt="" />
          <div class="about_img_lv"></div>
        </div>
      </div>
      <!-- about 中心 -->
      <div class="about_center">
        <div class="about_center_top">
          <span>在解决什么</span>
          <div></div>
        </div>
        <div class="about_center_font">
          从我们过去的工作经历当中主要做的是网站建设、微信网站、电商平台开发和<br />
          最新的小程序开发。<br />
          我们对项目的把控和流程以项目的管理都是非常熟练做到得心应手，因为我们做过的项目实在太多。
          <br />
        </div>
        <div class="about_center_img">
          <img src="../assets/image/about/dz_about3.png" alt="" />
        </div>
      </div>
      <!-- about 下 -->
      <div class="about_down">
        <div class="about_down_box">
          <div class="about_down_top">
            <span>为客户来带来那些价值</span>
            <div></div>
          </div>
          <div class="about_down_font">
            我们做过大部份项目，有些客户发了钱做了个站，<br />
            然后发钱去推广把线上大部份流量指向到网站或手机端效果并不是很理想，<br />
            原因出在很多，如果你遇到一个不专业的团队，帮你做个网站那么就是一个巨大的坑，(杜绝模版网站)<br />
            <span class="about_blue"
              >如用户体验不好，流失的就是用户，如果后台操作不好浪费的就是人力成本</span
            >。毕竟如果今的互联网时代不只是做一个网站就在那只是观赏的，<br />
            还要具有营销的方式。 <br />
          </div>
          <div class="about_down_fonts">
            我们认为一个好的项目出来必需要经历一家专业成熟的开发项目公司，熟悉整体流程，且具有互联网思维的产品经理帮你规划，<br />
            还有对色彩了敏锐的设计师，牛B的前端，以资深的程序员，同时他们都具有对网站或平台有产品思路的去完成每一个细节。<br />
            在过去多年里面我们有很多成功案例帮助客户取得了很大的帮助，<br />
            例如麻椒电商平台，<span class="about_blue"
              >我们就做到了销售上的帮助，晒秋平台，订单和用户量的增长</span
            >。<br />
            这些就是我们需要给客户带来应有的价值，合作伙伴在互联网取得了成就，就是对我们自已最大的价值。
            <br />
          </div>
          <a href="" style="text-decoration: none" class="about_down_a">
            <div>查看案例</div>
          </a>
        </div>
      </div>
      <!-- 联系我们 -->
      <last></last>
      <!-- 友情链接 -->
      <location class="location"></location>
    </div>
  </div>
</template>

<script>
import last from "../components/Last";
import location from "../components/Location";
import topnav from "../components/Topnav.vue"
import phonenav from '../components/Phone_nav.vue'
export default{
  data() {
    return {
      flag: false,
      drawer: false,
      direction: 'rtl',
      backcolor:'about/about.jpg',
      type:'image',
      // windowHeight: document.documentElement.clientHeight, //实时屏幕高度
      logo: require("../assets/image/logo.png"),
      nav: [
        { title: "首页" },
        { title: "关于我们" },
        { title: "商城小程序" },
        { title: "生鲜小程序" },
        { title: "案例展示" },
        { title: "服务项目" },
        { title: "联系我们" },
      ],
      link: [
        { name: "小程序开发" },
        { name: "上海小程序开发" },
        { name: "小程序商店" },
        { name: "微信小程序开发文档" },
        { name: "分销商城小程序" },
        { name: "电商小程序开发" },
        { name: "百家号" },
        { name: "商城小程序" },
        { name: "微信小程序开发API" },
      ],
    };
  },
  methods:{
    flags(){
      if(this.flag == true){
        this.flag = false
      }else{
        this.flag = true
      }
      
    }
  },
  components: {
    last: last,
    location: location,
    topnav:topnav,
    phonenav:phonenav
  },
};
</script>
